<!DOCTYPE html>
<title>CSS Writing Modes Test: Shrink-to-fit with orthogonal children</title>
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows">
<meta name="assert" content="Shrink-to-fit with orthogonal children">
<meta name="flags" content="ahem combo">
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<style>
.test {
    border:thin solid;
    font:20px/1 Ahem;
}
.target {
    color:blue;
    writing-mode:vertical-rl;
}
.border {
    border-right:blue solid .5em;
}
.next {
    color:orange;
}
.inline-block {
    display:inline-block;
}
.float {
    float:left;
}
h3 {
    clear:both;
}
h3.fail {
    color:red;
}
table {
    border-spacing:0px;
}
td {
    padding:0px;
}
</style>
<div id="log"></div>
<div id="container">
<p>Test passes if the <b>left</b> edge of the orange box <b>touches</b> the <b>right</b> edge of the blue box.
    There should be no spaces nor overlaps.
<p>The blue box must be <b>tall</b>, the height should be as twice as the width.
<p>If script is enabled, there should be one or more PASS and no FAIL.
<h3>1: Shrink-to-fit inline-block with a child of orthogonal block</h3>
<div class="test">
    <div class="inline-block"><div class="target">XX</div></div><span class="next">YY</span>
</div>
<h3>2: Shrink-to-fit inline-block with a child of orthogonal inline</h3>
<div class="test">
    <div class="inline-block"><span class="target">XX</span></div><span class="next">YY</span>
</div>
<h3>3: Shrink-to-fit inline-block with a child of orthogonal block with borders</h3>
<div class="test">
    <div class="inline-block"><div class="target border">XXX</div></div><span class="next">YY</span>
</div>
<h3>4: Shrink-to-fit inline-block with a child of orthogonal inline with borders</h3>
<div class="test">
    <div class="inline-block"><span class="target border">XXX</span></div><span class="next">YY</span>
</div>
<h3>5: Shrink-to-fit inline-block with a child of orthogonal block in inline-block</h3>
<div class="test">
    <div class="inline-block"><div class="inline-block"><div class="target">XX</div></div></div><span class="next">YY</span>
</div>
<h3>6: Shrink-to-fit inline-block with a child of orthogonal inline in inline-block</h3>
<div class="test">
    <div class="inline-block"><div class="inline-block"><span class="target">XX</span></div></div><span class="next">YY</span>
</div>
<h3>7: Shrink-to-fit inline-block with a child of orthogonal block with borders in inline-block</h3>
<div class="test">
    <div class="inline-block"><div class="inline-block"><div class="target border">XXX</div></div></div><span class="next">YY</span>
</div>
<h3>8: Shrink-to-fit inline-block with a child of orthogonal inline with borders in inline-block</h3>
<div class="test">
    <div class="inline-block"><div class="inline-block"><span class="target border">XXX</span></div></div><span class="next">YY</span>
</div>
<h3>9: Shrink-to-fit float with a child of orthogonal block</h3>
<div class="test">
    <div class="float"><div class="target">XX</div></div><span class="next">YY</span>
</div>
<h3>10: Shrink-to-fit float with a child of orthogonal inline</h3>
<div class="test">
    <div class="float"><span class="target">XX</span></div><span class="next">YY</span>
</div>
<h3>11: Shrink-to-fit float with a child of orthogonal block with borders</h3>
<div class="test">
    <div class="float"><div class="target border">XXX</div></div><span class="next">YY</span>
</div>
<h3>12: Shrink-to-fit float with a child of orthogonal inline with borders</h3>
<div class="test">
    <div class="float"><span class="target border">XXX</span></div><span class="next">YY</span>
</div>
<h3>13: Shrink-to-fit float with a child of orthogonal block in inline-block</h3>
<div class="test">
    <div class="float"><div class="inline-block"><div class="target">XX</div></div></div><span class="next">YY</span>
</div>
<h3>14: Shrink-to-fit float with a child of orthogonal inline in inline-block</h3>
<div class="test">
    <div class="float"><div class="inline-block"><span class="target">XX</span></div></div><span class="next">YY</span>
</div>
<h3>15: Shrink-to-fit float with a child of orthogonal block with borders in inline-block</h3>
<div class="test">
    <div class="float"><div class="inline-block"><div class="target border">XXX</div></div></div><span class="next">YY</span>
</div>
<h3>16: Shrink-to-fit float with a child of orthogonal inline with borders in inline-block</h3>
<div class="test">
    <div class="float"><div class="inline-block"><span class="target border">XXX</span></div></div><span class="next">YY</span>
</div>
<h3>17: Shrink-to-fit table-cell with a child of orthogonal block</h3>
<div class="test">
    <table><tr><td><div class="target">XX</div></td><td class="next">YY</td></tr></table>
</div>
<h3>18: Shrink-to-fit table-cell with a child of orthogonal inline</h3>
<div class="test">
    <table><tr><td><span class="target">XX</span></td><td class="next">YY</td></tr></table>
</div>
<h3>19: Shrink-to-fit table-cell with a child of orthogonal block with borders</h3>
<div class="test">
    <table><tr><td><div class="target border">XXX</div></td><td class="next">YY</td></tr></table>
</div>
<h3>20: Shrink-to-fit table-cell with a child of orthogonal inline with borders</h3>
<div class="test">
    <table><tr><td><span class="target border">XXX</span></td><td class="next">YY</td></tr></table>
</div>
<h3>21: Shrink-to-fit table-cell with a child of orthogonal block in inline-block</h3>
<div class="test">
    <table><tr><td><div class="inline-block"><div class="target">XX</div></div></td><td class="next">YY</td></tr></table>
</div>
<h3>22: Shrink-to-fit table-cell with a child of orthogonal inline in inline-block</h3>
<div class="test">
    <table><tr><td><div class="inline-block"><span class="target">XX</span></div></td><td class="next">YY</td></tr></table>
</div>
<h3>23: Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block</h3>
<div class="test">
    <table><tr><td><div class="inline-block"><div class="target border">XXX</div></div></td><td class="next">YY</td></tr></table>
</div>
<h3>24: Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block</h3>
<div class="test">
    <table><tr><td><div class="inline-block"><span class="target border">XXX</span></div></td><td class="next">YY</td></tr></table>
</div>
</div>
<script>
if (window.location.search == "?wait") {
    console.log("Sleeping 5 secs for debug");
    setup({explicit_done:true});
    window.setTimeout(run, 5000);
} else {
    run();
}

function run() {
    Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
        var title = node.previousElementSibling.innerText;
        test(function () {
            try {
                var targetNode = node.querySelector(".target");
                var targetBounds = targetNode.getBoundingClientRect();
                assert_approx_equals(targetBounds.height, targetBounds.width * 2, .01, "writing-mode is vertical")
                var nextNode = node.querySelector(".next");
                var nextBounds = nextNode.getBoundingClientRect();
                assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
            } catch (e) {
                node.previousElementSibling.classList.add("fail");
                throw e;
            }
        }, title);
    });
    if (window.testRunner)
        container.style.display = "none";
    done();
}
</script>
